<?php
    $this->headTitle($this->site_name.' - Admin Home');
?>

<script type="text/javascript" src="/js/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.droppable.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.sortable.min.js"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>

<style>
	.draggable1, .draggable2 { cursor:pointer;}
	.sortable { list-style-type: none; margin: 0; padding: 0;  }
	.sortable li { margin: 0 3px 3px 3px;  }
	.sortable li a { position: absolute;  }
	div .left-column { width: 47%; font-size:12px;float:left;}
	div .right-column { width: 47%; font-size:12px;float:left;}
	
</style>

<script>
<?php
	echo "var services=new Array();\n";
	echo "var departments=new Array();\n";
	echo "var serviceurl=new Array();\n";
	$all_services = $this->all_services;
	foreach ($all_services as $key => $value){
		echo "services['".$value['icon']."']='".$value['dpt_name']."';\n";
		echo "departments['".$value['icon']."']='".$value['dpt_id']."';\n";
		echo "serviceurl['".$value['icon']."']='".$value['service_url']."';\n";
	} 
?>

	function addNewService(){
    	$("#dpt_id").val('');
    	$("#dpt_id").attr('readonly',false);
    	$("#dpt_id").css('background-color','#fff');
    	$("#dpt_name").val('');
    	$("#description").val('');
    	$("#service_url").val('');
    	$("#service_name").val('');
    	$("#service_area").val('');
    	$("#icon").val('');
    	$("#transfer_fund_allowed").val('');
    	$("#network_id").val('');
    	$("#payment_center_id").val('');
		
		$("span.ui-dialog-title").text('Add New Service');  		
		$("#submit").val('Add Service');
		$("#service-dialog").dialog("open");
	}		

	function updateService(id){
		
	    $.post("/default/do/get-service", {dpt_id: ""+id+""}, function(data)
	   	{
	    	        if(data['dpt_id'] >0) {
		    	    	$("#dpt_id").val(data['dpt_id']);
		    	    	$("#dpt_id").attr('readonly',true);
		    	    	$("#dpt_id").css('background-color','#efefef');
		    	    	$("#dpt_name").val(data['dpt_name']);
		    	    	$("#description").val(data['description']);
		    	    	$("#service_url").val(data['service_url']);
		    	    	$("#service_name").val(data['service_name']);
		    	    	$("#service_area").val(data['service_area']);
		    	    	$("#icon").val(data['icon']);
		    	    	$("#transfer_fund_allowed").val(data['transfer_fund_allowed']);
		    	    	$("#network_id").val(data['network_id']);
		    	    	$("#payment_center_id").val(data['payment_center_id']);

	    	        	//alert(content);
	    	    		$("span.ui-dialog-title").text('Update Service');  		
	    	    		$("#submit").val('Update Service');
	    	    		$("#service-dialog").dialog("open");
	    	        }else{
		    	        alert("Sorry, failed to fetch service information.");
	    			}
	    }, "json");
		
	}		
</script>

<script type="text/javascript">
	$(document).ready(function(){
	    $("#serviceForm").validate({
	      rules: {
        	dpt_id: {
	          required: true
	        },
	        dpt_name: {
		      required: true
		    },
		    description: {
			  required: true
			},
		    service_url: {
		      required: true,
		      url: true
			},
			service_name: {
			  required: true
			},
			service_area: {
			  required: true
			},
			network_id: {
			  required: true
			},			
			payment_center_id: {
			  required: true
			}			
	      },
	      messages: {
	    	dpt_id: {
	          required: "department id can not be empty"
	        },
	        dpt_name: {
	          required: "department name can not be empty"
	        },
	        description: {
		      required: "description can not be empty"
		    },
		    service_url: {
		      required: "service url can not be empty",
		      url: "please input valid url"
		    },
		    service_name: {
			  required: "service name can not be empty"
			},
			service_area: {
			  required: "service area can not be empty"
			},
			network_id: {
			  required: "network id can not be empty"
			},
			payment_center_id: {
			  required: "payment center id can not be empty"
			}			
	      }
	    });

		$("#service-dialog").dialog({autoOpen:false,modal:true,width:500});
		$( "#sortable1" ).sortable();
		$( "#sortable1" ).disableSelection();
		
		$( ".draggable2" ).draggable({revert: true});		  
	    
	  });

</script>  

<?php if (!empty($this->success_msg)):?>
<div class="response-msg success ui-corner-all"><?php echo $this->success_msg;?></div>
<?php endif ?>

<?php if (!empty($this->error_msg)):?>
<div class="response-msg error ui-corner-all"><?php echo $this->error_msg;?></div>
<?php endif ?>


<div id="admin-dashboard">

<h2>Services Management</h2>
 
<div class="section">
<h3>All Yesup Services: <a href="#" class="grey-btn" style="margin-left:160px;display:inline;" onclick="addNewService();"><span class="ui-title">Add New Service</span></a></h3>

<div class="demo-frame1" id="droppable1">		

	<ul id="sortable1">
<?php if (count($this->all_services)>0):?>
	<?php 
	foreach($this->all_services as $index => $item ){
		echo '<li id="'.$item['icon'].'" title="Click to edit"><div id="'.$item['icon'].'_div" onclick="updateService(\''.$item['dpt_id'].'\');"><a href="#">'.$item['dpt_name'].'</a><span id="'.$item['icon'].'_span"></span><p>'.$item['description'].'</p></div></li>';
	}
	?>
		
<?php else: ?>
	<li>No service right now.</li>
<?php endif ?>
	</ul>

</div>
 
</div>


<input type=hidden name=service_id id=service_id value=''>

<div id="service-dialog" title="Add New Service" style="display:none;" >
            <?php if (!empty($this->formError)): ?>
            <div class="form_errors_block">
                <?php echo $this->formError; ?>
            </div>
            <?php endif; ?>

            <?php echo $this->form; ?>
</div>


</div>